<template>
	<view>
		<view class="view-wapper">
			<u-navbar :title="title" safeAreaInsetTop fixed @rightClick="rightClick" @leftClick="leftClick">
			</u-navbar>
		</view>

		<view class="title">汽车制造</view>
		<view class="tag">
			<view @click="select(item.id)"  v-for="item in list" :key="item.id" :class="{'stateStyle':style == item.id}">{{item.name}}</view>
		</view>
		
		<view class="product-list">
			<view class="view-list-content">
				<view class="view-list-item" v-for="(item,index) in 11" :key="index">
					<image src="../../static/runhua.png" mode=""></image>
					<view class="view-info">
						<view class="view-name">得力(deli)家用工具箱套装电工木工维修工具箱套装</view>
						<view class="view-price">
							<view class="text-price"> <text>￥22</text> <text>.5/台</text> </view>
							<image src="../../static/jiahao.png" mode=""></image>
						</view>
						<view class="guige">6个规格</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style:1,
				title: '',
				id: '',
				list:[
					{id:1,name:'电线'},
					{id:2,name:'链条'},
					{id:3,name:'焊接切割'},
					{id:4,name:'水性漆'}
				]
			}
		},
		onLoad(option) {
			this.title = option.name
			this.id = option.id
		},

		methods: {
			leftClick() {
				uni.navigateBack({})
			},
			select(e){
				this.style = e
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.view-wapper {
		width: 100%;
		height: 98rpx;
	}
	
	.title {
		background-color: #fff;
		color: #1D2DA7;
		font-size: 30rpx;
		text-align: center;
		height: 120rpx;
		
		line-height: 160rpx;
	}
	
	.tag {
		width: 94%;
		margin: auto;
		
		view {
			display: inline-block;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx 20rpx 0 0;
			font-size: 28rpx;
			color: #222;
			
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 64rpx;
			text-align: center;
			height: 64rpx;
			width: 134rpx;
		}
		
		.stateStyle {
			color: #1D2DA7;
			border: 1rpx solid #1D2DA7;
		}
	}
	
	.product-list {
		width: 95%;
		background-color: #f7f7f7;
		padding: 0 20rpx;
		margin-top: 20rpx;
	
		.view-list-content {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
	
			.view-list-item {
				border-radius: 20rpx;
				background: #FFF;
				width: 336rpx;
				height: 560rpx;
				flex-shrink: 1;
				margin-bottom: 30rpx;
	
				.view-img {
					width: 336rpx;
					height: 336rpx;
					overflow: hidden;
				}
	
				image {
					width: 330rpx;
					height: 330rpx;
					border-radius: 10rpx;
				}
	
				.view-info {
					padding: 20rpx;
	
					.view-name {
						width: 100%;
						height: 80rpx;
						font-size: 28rpx;
						font-weight: 500;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
	
					.view-num {
						width: 120rpx;
						height: 30rpx;
						background: rgba(74, 154, 255, 0.05);
						border: 1px solid #4A9AFF;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: #4A9AFF;
						line-height: 30rpx;
						text-align: center;
						margin: 20rpx 0rpx;
					}
	
					.view-price {
						display: flex;
						font-weight: bold;
						justify-content: space-between;
						align-items: flex-end;
						margin-top: 10rpx;
	
						.text-price {
							text {
								&:nth-child(1) {
									color: #E50014;
									font-weight: bold;
									font-size: 32rpx;
								}
	
								&:nth-child(2) {
									color: #E50014;
									// font-weight: bold;
									font-size: 26rpx;
								}
							}
						}
	
						image {
							width: 32rpx;
							height: 32rpx;
							// margin-bottom: 10rpx;
						}
					}
					
					.guige {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>
